import React, {Component} from "react";
import './header.scss'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'

class Header extends Component {
  // props类型检查
  static propTypes = {
    title: PropTypes.string.isRequired,
    signUp: PropTypes.bool,
    goBack: PropTypes.func,
    goHome: PropTypes.func,
    edit: PropTypes.func,
    userInfo: PropTypes.object.isRequired
  }
  state = {
    headTitle: '首页'
  }
  handleBack = () => {
    this.props.goBack()
  }
  handleEdit = () => {
    this.props.edit()
  }
  handleHome = () => {
    this.props.goHome()
  }
  // return true 更新视图   return false  不更新
  // shouldComponentUpdate(nextProps, nextState, nextContext) {
  //
  // }
  render() {
    return (
      <header className="header-container">
        <div className="seat" />
        <div className="content">
          {/*结合是否有goBack函数判断是否显示返回按钮*/}
          {this.props.goBack && <div className="icon-back header-back" onClick={this.handleBack}/>}

          <div className="header-title">{this.props.title}</div>

          {
            this.props.signUp
              ? (
                this.props.userInfo
                  ? <span className='icon-account user-avatar' onClick={this.handleHome}/>
                  : <span>登录|注册</span>
              )
              : ''
          }

          {
            this.props.edit &&
            <div onClick={this.handleEdit} className='user-avatar'>
              {this.props.userInfo.operate === 'edit' ? '编辑' : '完成'}
            </div>
          }
        </div>

      </header>
    )
  }

}

// 通过 mapStateToProps 将store中的userInfo绑定到Header组件上
const mapStateToProps = (state) => {
  return {
    userInfo: state.userInfo
  }
}
// react-redux通过Provider和connect将store和react组件绑定，connect接受四个参数，
// mapStateToProps必传
export default connect(mapStateToProps, {})(Header)